/* color 基本颜色  */
.c-blue {
  color: #0151dc;
}

.c-red {
  color: #ff2121;
}

.c-green {
  color: #62cb2f;
}

.c-grey {
  color: #8c8e92;
}

.c-orange {
  color: #fd9a01;
}

.c-black {
  color: #2f2f34;
}

.c-text {
  color: #424e61;
}

.c-white {
  color: #fff;
}

/*  背景 */
.bg-grey {
  background: #eff1f6;
}

.bg-blue {
  background: #3072ff;
}

.bg-white {
  background-color: #fff;
}

/* 字号 */
@each $size in 12, 13, 14, 16, 17, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 40, 44 {
  .f-#{$size} {
    font-size: #{$size}px;
  }
}

/* 行高 */
@each $size in 12, 13, 14, 16, 17, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 40, 44 {
  .line-h-#{$size} {
    line-height: #{$size}px;
  }
}

/* gap */
@each $size in 5 ,6 ,8 ,10 ,15 , 20, {
  .gap-#{$size} {
    gap: #{$size}px;
  }
}

// 加粗
.f-w {
  font-weight: bold;
}

.f-w4 {
  font-weight: 400;
}

.f-w5 {
  font-weight: 500;
}

.f-w6 {
  font-weight: 600;
}

.f-w7 {
  font-weight: 700;
}

/* 对齐方式 */
.ta-l {
  text-align: left;
}

.ta-c {
  text-align: center;
}

.ta-r {
  text-align: right;
}

.t-nowrap {
  white-space: nowrap;
}

/* 边框 */
$borderColor: #e8eaec;

.b-a {
  border: 1px solid $borderColor;
}

.b-r {
  border-right: 1px solid $borderColor;
}

.b-l {
  border-left: 1px solid $borderColor;
}

.b-t {
  border-top: 1px solid $borderColor;
}

.b-b {
  border-bottom: 1px solid $borderColor;
}

/* 圆角 */
.br-8 {
  border-radius: 8px;
}

.br-16 {
  border-radius: 16px;
}

.br-50p {
  border-radius: 50%;
}

/* 阴影 */
.box-shadow {
  box-shadow: 0 0 12px 0 rgb(209 213 220 / 34%);
}

/* 其他 */
.border-box {
  box-sizing: border-box;
}

.c-pointer {
  cursor: pointer;
}

.overflow-auto {
  overflow: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-y-hidden {
  overflow-y: hidden;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-x-hidden {
  overflow-x: hidden;
}

.overflow-hidden {
  overflow: hidden;
}

.ws-n {
  white-space: nowrap;
}

/* 一行超出省略号 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 超出2行省略号 */
.text-ellipsis-2 {
  word-break: break-all;
  overflow: hidden;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 布局 */
.full-height {
  height: 100%;
}

.full-width {
  width: 100%;
}

.full-box {
  height: 100%;
  width: 100%;
}

/* 定位垂直居中 */
.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 绝对定位充满容器 */
.absolute-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

/* 多行 并自动换行 */
.flex-wrap {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

/* 一行 左右分布 */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-between-c {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.flex-ai-c {
  display: flex;
  align-items: center;
}

.d-flex-c {
  display: flex;
  flex-direction: column;
}

.d-flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-0 {
  flex: 0 0 auto;
}

.ai-c {
  align-items: center;
}

.jc-fs {
  justify-content: flex-start;
}

.jc-fe {
  justify-content: flex-end;
}

.jc-c {
  justify-content: center;
}

.jc-sa {
  justify-content: space-around;
}

.jc-sb {
  justify-content: space-between;
}

.jc-se {
  justify-content: space-evenly;
}

/* padding/margin
 尺寸：tiny mini s m l
 方向：p-a 所有方向，p-v 上下，p-h 左右， p-t 上，p-b 下，p-r 右，p-l 左 */
$sizes: (
  "tiny": "5",
  "mini": "10",
  "s": "20",
  "m": "32",
  "l": "40",
);

@each $type, $size in $sizes {
  .p-a-#{$type} {
    padding: #{$size}px;
  }
  .p-v-#{$type} {
    padding: #{$size}px 0;
  }
  .p-h-#{$type} {
    padding: 0 #{$size}px;
  }
  .p-l-#{$type} {
    padding-left: #{$size}px;
  }
  .p-r-#{$type} {
    padding-right: #{$size}px;
  }
  .p-t-#{$type} {
    padding-top: #{$size}px;
  }
  .p-b-#{$type} {
    padding-bottom: #{$size}px;
  }
}

@each $type, $size in $sizes {
  .m-a-#{$type} {
    margin: #{$size}px;
  }
  .m-v-#{$type} {
    margin: #{$size}px 0;
  }
  .m-h-#{$type} {
    margin: 0 #{$size}px;
  }
  .m-l-#{$type} {
    margin-left: #{$size}px;
  }
  .m-r-#{$type} {
    margin-right: #{$size}px;
  }
  .m-t-#{$type} {
    margin-top: #{$size}px;
  }
  .m-b-#{$type} {
    margin-bottom: #{$size}px;
  }
}

.no-padding {
  padding: 0 !important;
}

.position-relative {
  position: relative;
}

.ff-nf {
  font-family: "Number Font", serif;
}
